body {
    font-family: Helvetica Neue, PingFang SC, Helvetica, Arial, Hiragino Sans GB, Microsoft Yahei, \\5FAE\8F6F\96C5\9ED1, STHeiti, \\534E\6587\7EC6\9ED1, sans-serif;
    font-size: 14px;
    color: #666;
}

$mainW : 1220px;

.wrapper {
    min-width: $mainW;
    background: #ededed;
    overflow: hidden;
    width: 100%;

    .coupons_sidebar {
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 111;

        img {
            width: 189px;
            height: 251px;
            cursor: pointer;
        }
    }

    .top {
        width: 100%;
        height: 45px;
        background-image: linear-gradient(90deg, #222325, #3b3c3f, #222325);
        position: relative;

        .logo {
            width: 18px;
            height: 31px;
            float: left;
            margin-left: 21px;
            padding-top: 13px;

            a {
                display: block;
                width: 18px;
                height: 18px;
                background: url(../static/images/logo.png) no-repeat;
                background-size: contain;
            }
        }

        .container {
            margin: 0 auto;
            width: 1220px;
            height: 45px;
        }

        .top_nav {
            float: right;
            line-height: 28px;
            margin: 9px 181px 0 0;

            li {
                float: left;
            }

            a {
                color: hsla(0, 0%, 100%, .7);
                display: block;
                font-size: 12px;
                padding: 0 20px;
                transition: all .15s ease-out;
            }

            a.active {
                color: #e5e5e5;
            }
        }

        .top_aside {
            box-sizing: border-box;
            position: absolute;
            top: 11px;
            right: 21px;

            .nav_user_wrapper {
                position: absolute;
                z-index: 30;
                padding-top: 18px;
                display: none;
                top: 20px;
                width: 168px;
                left: 50%;
                margin-left: -120px;

                .nav_user_list {
                    position: relative;
                    width: 168px;
                    background: #fff;
                    border: 1px solid #d6d6d6;
                    border-color: rgba(0, 0, 0, .08);
                    border-radius: 8px;
                    box-shadow: 0 20px 40px rgba(0, 0, 0, .15);

                    .userwrapper {
                        display: block;
                        position: relative;
                        margin: 5px auto 0;
                        width: 46px;
                        height: 46px;
                        margin-bottom: 8px;

                        span {
                            border-radius: 50%;
                            display: block;
                            width: 100%;
                            height: 100%;
                            background: url(../static/images/user-avatar.png) no-repeat;
                            background-size: contain;
                        }

                    }

                    .user {
                        margin-bottom: 16px;
                        font-size: 12px;
                        line-height: 1.5;
                        text-align: center;
                        color: #757575;
                    }

                    .list {
                        li {
                            a {
                                position: relative;
                                border-top: 1px solid #f5f5f5;
                                display: block;
                                padding-left: 54px;
                                line-height: 44px;
                                width: 168px;
                                height: 44px;
                                color: #616161;
                                font-size: 12px;
                                background: none;

                                span {
                                    background: url(../static/images/account-icon.png) no-repeat;
                                    background-size: 240px 107px;
                                    display: inline-block;
                                    position: absolute;
                                    left: 22px;
                                    top: 50%;
                                    width: 20px;
                                    height: 20px;
                                    margin-top: -8px;

                                }

                                .a {
                                    background-position: 0 -44px;
                                }

                                .b {
                                    background-position: -20px -44px;
                                }

                                .c {
                                    background-position: -20px -84px;
                                }

                                .d {
                                    background-position: 0 -64px;
                                }

                                .e {
                                    background-position: -20px -64px;
                                }

                                .f {
                                    background-position: 0 -84px;
                                }
                            }
                        }

                        .logout {
                            cursor: pointer;
                        }
                    }
                }
            }

            .top_user {
                margin-left: 41px;
                width: 20px;
                height: 20px;

                a {
                    position: absolute;
                    width: 20px;
                    height: 20px;
                    left: 0;
                    top: 0;
                    background: url(../static/images/avatar-and-cart.png) 50% no-repeat;
                    background-position: 1px 2px;
                    background-size: 180%;
                }
            }

            .top_cart {
                margin-left: 10px;
                width: 21px;
                height: 20px;

                a {
                    position: absolute;
                    width: 20px;
                    height: 20px;
                    right: 0;
                    top: 1px;
                    background: url(../static/images/avatar-and-cart.png) no-repeat;
                    background-position: 0 -17px;
                    background-size: 180%;
                }

                .cart_wrapper {
                    display: none;
                    position: absolute;
                    right: 0;
                    padding-top: 18px;
                    z-index: 30;
                    width: 360px;

                    .cart_list {
                        position: relative;
                        z-index: 10;
                        background: #fff;
                        border: 0 solid hsla(0, 0%, 100%, .01);
                        border-radius: 8px;
                        box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 20px 40px rgba(0, 0, 0, .15);
                        overflow: hidden;

                        .empty {
                            overflow: hidden;
                            height: 134px;
                            padding-top: 180px;
                            background: url(../static/images/cart-empty.png) center 90px no-repeat;
                            background-size: auto 62px;
                            text-align: center;

                            h3 {
                                font-size: 18px;
                                color: #333;
                                margin-bottom: 7px;
                            }

                            p {
                                font-size: 12px;
                                color: #bcbcbc;
                            }
                        }
                    }
                }

                .info_wrapper {
                    display: none;
                    position: absolute;
                    right: 0;
                    z-index: 30;
                    width: 360px;
                    background: #FFF;
                    border: 1px solid #ccc;
                    border-radius: 8px;
                    margin-top: 18px;

                    .box_inner {
                        width: 360px;
                        max-height: 280px;
                        overflow-x: hidden;
                        overflow-y: auto;

                        .cart_group {
                            width: 360px;
                            height: 85px;
                            margin-top: 10px;
                            position: relative;
                            border-bottom: 1px dotted #eee;

                            .items-thumb {
                                position: relative;
                                margin-top: 0px;
                                margin-left: 15px;
                                overflow: hidden;
                                width: 80px;
                                height: 80px;
                                float: left;
                                border: 1px solid #ccc;
                            }

                            .cart_info {
                                float: left;
                                margin-left: 15px;

                                .name {
                                    height: 16px;
                                    overflow: hidden;
                                    font-size: 14px;
                                    line-height: 16px;
                                    margin: 20px 10px 10px;
                                    font-weight: bold;
                                }

                                .price {
                                    font-style: normal;
                                    overflow: hidden;
                                    width: 137px;
                                    text-align: center;
                                    color: #d44d44;
                                    font-size: 14px;
                                }
                            }
                        }
                    }

                    .cart_bottom {
                        position: relative;
                        padding-top: 10px;
                        padding-left: 20px;
                        height: 50px;
                        border-top: 1px solid #f0f0f0;
                        border-radius: 0 0 8px 8px;
                        box-shadow: inset 0 -1px 0 hsla(0, 0%, 100%, .5), 0 -3px 8px rgba(0, 0, 0, .04);
                        background: linear-gradient(#fafafa, #f5f5f5);

                        .b_l {
                            float: left;

                            .shipping-price {
                                span {
                                    color: #d44d44;
                                }
                            }
                        }

                        .jieguo {
                            display: block;
                            margin: 0 0 0 85px;
                            border-radius: 9px;
                            text-align: center;
                            text-shadow: rgba(0, 0, 0, .15) 0 -1px 0;
                            cursor: pointer;
                            user-select: none;
                            background: #567ce6 linear-gradient(#799cea, #567ce6);
                            box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 -1px 2px rgba(0, 0, 0, .2);
                            width: 108px;
                            height: 48px;
                            float: left;
                            line-height: 48px;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }

    .nav {
        position: relative;
        height: 90px;
        width: 100%;
        z-index: 8;

        .nav_wrapper {
            padding: 23px 0;
            height: 28px;
            position: relative;
            border-bottom: 1px solid #e1e1e1;
            background: #fff;
            box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .05);

            .nav_container {
                position: relative;
                display: flex;
                flex-direction: row;
                align-items: center;
                width: $mainW;
                margin: 0 auto;

                .nav_list {
                    height: 28px;
                    line-height: 28px;

                    li {
                        position: relative;
                        float: left;

                        a {
                            display: block;
                            padding-right: 30px;
                            color: rgba(0, 0, 0, .7);
                            transition: all .15s ease-out;
                        }

                        a.active {
                            color: #5079d9;
                        }
                    }
                }

                .search_bar {
                    position: absolute;
                    right: 0;
                    width: 330px;
                    top: -3px;

                    .search_form {
                        height: 36px;
                        padding-left: 40px;
                        padding-right: 15px;
                        border: 1px solid rgba(0, 0, 0, .08);
                        border-radius: 20px;
                        box-sizing: border-box;
                        background: #fff;

                        .search_box {
                            width: 100%;
                            height: 36px;
                            font-size: 14px;
                            font-weight: 700;
                            color: #333;
                            border: none;
                            outline: none;
                            background-color: transparent;
                            box-shadow: none;
                        }

                        .search_btn {
                            position: absolute;
                            top: 7px;
                            left: 10px;
                            height: 20px;
                            width: 20px;
                            border: none;
                            cursor: pointer;
                            background: url(../static/images/search_btn.png) no-repeat;
                        }

                        .search_recommend_words {
                            display: block;
                            position: absolute;
                            top: 50%;
                            height: 20px;
                            line-height: 20px;
                            right: 0;
                            transform: translateY(-50%);

                            a {
                                color: #3965cc;
                                border: 1px solid #93b2f7;
                                background: #e5efff;
                                display: inline-block;
                                margin-right: 8px;
                                border-radius: 10px;
                                height: 20px;
                                padding: 0 10px;
                                box-sizing: border-box;
                                text-overflow: ellipsis;
                                font-size: 12px;
                                font-weight: 700;
                            }
                        }
                    }

                    .keywords_list {
                        display: none;
                        position: absolute;
                        top: 36px;
                        width: 100%;
                        left: 0;
                        z-index: 5;

                        .arrow_up {
                            position: relative;
                            width: 0;
                            height: 0;
                            left: 40px;
                            border: 10px solid;
                            border-color: transparent transparent #fff;

                            span {
                                display: block;
                                position: absolute;
                                top: -9px;
                                left: -10px;
                                width: 0;
                                height: 0;
                                border: 10px solid;
                                border-color: transparent transparent #fff;
                            }
                        }

                        .result_list {
                            border: 1px solid #cfcfcf;
                            border-radius: 8px;
                            background: #fff;
                            box-shadow: 0 30px 75px 0 rgba(0, 0, 0, .3);
                            overflow: hidden;

                            li {
                                padding: 10px 20px;
                                color: #666;
                                font-size: 14px;
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                            }

                            li:first-child {
                                padding-top: 20px;
                            }
                        }
                    }
                }
            }
        }

        .nav_goods_panel {
            margin: 0 auto;
            min-width: 1220px;
            min-height: 306px;
            background: #fff;
            display: none;

            .nav_category_list {
                display: flex;
                justify-content: center;

                li {
                    padding-top: 28px;
                    min-width: 202px;
                }

                .min_title {
                    font-size: 12px;
                    opacity: .5;
                    color: #000;
                    font-weight: 700;
                    cursor: default;
                }

                .nav_category_item {
                    display: flex;
                    transform: scaleX(-1);
                    flex-wrap: wrap;
                    writing-mode: tb-rl;
                    min-height: 210px;
                    padding-top: 12px;

                    .sw {
                        position: relative;
                        align-items: center;
                        writing-mode: lr-tb;
                        margin: 0 0 10px 22px;
                        height: 40px;
                        white-space: nowrap;
                        display: flex;
                        transform: scaleX(-1);

                        img {
                            margin-right: 10px;
                            width: 40px;
                            height: 40px;
                        }

                        span {
                            display: inline-block;
                            width: 130px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            font-weight: 700;
                            color: rgba(0, 0, 0, .8);
                            writing-mode: lr-tb;
                        }

                        a {
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 100%;
                            height: 100%;
                            color: #5079d9;
                            cursor: pointer;
                        }
                    }

                }


            }
        }
    }

    .home_wrapper {
        width: $mainW;
        margin: 0 auto;

        .banner {
            position: relative;
            margin-top: 9px;
            height: 499px;
            overflow: hidden;
            box-sizing: border-box;
            border: 1px solid rgba(0, 0, 0, .14);
            border-radius: 8px;
            box-shadow: 0 3px 8px -6px rgba(0, 0, 0, .1);

            img {
                position: relative;
                width: 100%;
                height: 553px;
                top: -28px;
            }

            .swiper-pagination {
                position: relative;
                top: -90px;
            }
        }

        .home_box {
            overflow: hidden;
            position: relative;
            z-index: 0;
            margin-top: 25px;
            box-sizing: border-box;
            border: 1px solid rgba(0, 0, 0, .14);
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 3px 8px -6px rgba(0, 0, 0, .1);

            .storey_title {
                display: block;
                position: relative;
                font-size: 18px;
                line-height: 60px;
                color: #666;
                background: #fafafa;
                border-bottom: 1px solid rgba(0, 0, 0, .1);

                h5 {
                    margin-left: 25px;
                    font-weight: 700;
                    font-size: 100%;
                }

                .home_page {
                    position: absolute;
                    right: 10px;
                    top: 6px;
                    height: 60px;

                    a {
                        display: inline-block;
                        margin-left: -10px;
                        border: none;
                        width: 48px;
                        height: 48px;
                        text-align: left;
                        color: #474747;
                        background-color: inherit;
                        background-image: url(../static/images/hot-arrow-right.png);
                        background-size: 100%;
                        background-repeat: no-repeat;
                        cursor: pointer;
                    }

                    a:first-child {
                        transform: rotateY(180deg);
                    }

                    a.disabled {
                        opacity: .3;
                        cursor: not-allowed;
                    }
                }
            }

            .hot_items {
                margin: 0 -1px -1px;
                overflow: hidden;
                transition: all .5s;
                width: 2440px;
                transform: translate(0px, 0px);
            }

            .items {
                margin: 0 -1px -1px;
                overflow: hidden;
            }

            .item-recom {
                width: 610px;
                height: 429px;
                float: left;
                cursor: pointer;

                .advertise {
                    box-sizing: border-box;
                    border: 1px solid #efefef;
                    border-width: 0 1px 1px 0;
                    display: flex;
                    height: 100%;

                    .advertise_item {
                        border: 0;
                        position: relative;
                        flex: 1;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }

            .item_four {
                width: 305px;
                position: relative;
                float: left;
                height: 429px;

                .product_box_item {
                    width: 100%;
                    height: 100%;
                    border: none;
                    border-right: 1px solid #efefef;
                    border-bottom: 1px solid #efefef;
                    border-radius: initial;
                    position: relative;
                    box-sizing: border-box;
                    border-radius: 4px;
                    transition: box-shadow .15s ease-out;
                    cursor: pointer;
                    background: transparent;

                    .item_img {
                        img {
                            display: block;
                            width: 216px;
                            height: 216px;
                            margin: 0 auto;
                            padding: 45px 0 20px;
                        }
                    }

                    h4 {
                        line-height: 1.2;
                        font-size: 14px;
                        color: #333;
                        font-weight: 700;
                        margin: 0 8px;
                        overflow: hidden;
                        text-align: center;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    h6 {
                        overflow: hidden;
                        padding-top: 15px;
                        font-size: 12px;
                        line-height: 1.2;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        color: #999;
                        font-weight: 400;
                        text-align: center;
                    }

                    .params_colors {
                        margin-top: 15px;
                        text-align: center;
                        height: 14px;

                        .colors_list {
                            width: 72px;
                            height: 14px;
                            display: inline-block;
                            overflow: hidden;

                            li {
                                width: 14px;
                                height: 14px;
                                float: left;
                                cursor: pointer;
                                margin: 0 5px;

                                div {
                                    width: 8px;
                                    height: 8px;
                                    border: 1px solid #e5e5e5;
                                    border-radius: 50%;
                                    padding: 2px;
                                    transition: all .15s ease-out;

                                    img {
                                        width: inherit;
                                        height: inherit;
                                        border-radius: 50%;
                                        display: block;
                                    }
                                }
                            }
                        }
                    }

                    .item_price {
                        font-size: 0;
                        font-family: Arial;
                        color: #d44d44;
                        font-weight: 700;
                        margin-top: 20px;
                        text-align: center;
                        transition: all .1s ease-out;

                        .discount_price {
                            display: inline-block;

                            span {
                                font-size: 18px;
                                padding-left: 4px;

                                i {
                                    font-style: normal;
                                }
                            }
                        }

                        .original_price {
                            position: relative;
                            display: inline-block;
                            padding-left: 10px;
                            font-weight: 400;
                            color: #ccc;

                            span {
                                padding-left: 2px;
                                font-size: 12px;
                                text-decoration: line-through;

                                i {
                                    font-style: normal;
                                }
                            }
                        }
                    }

                    .colorful_tag {
                        position: absolute;
                        right: 10px;
                        top: 10px;
                        padding: 0 10px;
                        font-size: 12px;
                        font-weight: 700;
                        line-height: 18px;
                        border: 1px solid #e6e6e6;
                        border-radius: 13px;
                        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05);
                        color: #a06e37;
                        background: #fffbdf;
                        border-color: #d5b480;
                    }
                }
            }

            .floor_page {
                position: absolute;
                top: 0;
                right: 25px;

                a {
                    display: inline-block;
                    position: relative;
                    margin: 0 15px;
                    font-size: 14px;
                    color: #666;
                    font-weight: 700;
                }


                .floor_page_link {
                    margin-right: 0;
                    padding: 0 15px;
                    line-height: 34px;
                    background: #fafafa;
                    border: 1px solid #e1e1e1;
                    border-radius: 4px;
                    background-image: linear-gradient(180deg, #fff, #fafafa);

                    .smartisan_icon {
                        display: inline-block;
                        vertical-align: middle;
                    }
                }
            }

            .image_text_wrapper {
                position: relative;
                display: flex;

                .image_text_item {
                    position: relative;
                    flex: 1;
                    border-right: 1px solid rgba(0, 0, 0, .1);

                    div {
                        margin: 30px;
                        padding-bottom: 30px;

                        img {
                            border-radius: 4px;
                            width: 246px;
                            height: 138px;
                            background: rgba(0, 0, 0, .1);
                        }

                        h5 {
                            margin: 30px 0 12px;
                            color: #333;
                            overflow: hidden;
                            width: 100%;
                            font-size: 15px;
                            line-height: 1;
                            font-weight: 700;
                            -webkit-line-clamp: 1;
                        }

                        p {
                            overflow: hidden;
                            font-size: 12px;
                            color: #999;
                            font-weight: 400;
                            line-height: 18px;
                        }

                        span {
                            display: inline-block;
                            position: absolute;
                            bottom: 30px;
                            margin-top: 12px;
                            font-size: 12px;
                            font-weight: 500;
                            color: #5079d9;

                            i {
                                display: inline-block;
                                vertical-align: middle;
                            }
                        }

                        a {
                            display: block;
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
        }
    }
}

.footer {
    background: #fafafa;
    border-top: 1px solid #e6e6e6;
    display: block;
    text-rendering: optimizeLegibility;

    .container {
        width: $mainW;
        margin: 0 auto;

        .siteinfo {
            height: 108px;
            padding: 60px 0 55px;
            border-bottom: 1px solid #e6e6e6;
            position: relative;

            .nav_footer {
                li {
                    margin-right: 90px;
                    line-height: 1;
                    float: left;
                    width: 48px;

                    h3 {
                        color: #646464;
                        font-weight: 700;
                        font-size: 12px;
                        padding: 0 0 20px;
                    }

                    li {
                        color: #c3c3c3;
                        font-size: 12px;
                        padding: 7px 0;
                        clear: both;

                        a {
                            color: #969696;
                        }
                    }
                }
            }

            .service {
                position: absolute;
                right: 0;
                overflow: hidden;
                line-height: 34px;

                li {
                    clear: both;
                    width: 241px;
                    font-size: 12px;
                    line-height: 1;
                    color: #999;
                    text-align: right;
                }

                .tel {
                    font-size: 18px;
                    font-weight: 900;
                    line-height: 1;
                    cursor: default;
                    color: #5079d9;
                    position: relative;
                }

                .time {
                    margin-top: 15px;
                    font-family: PingFang SC;
                }

                .desc {
                    margin-top: 5px;
                }

                .online {
                    a {
                        float: right;
                        width: 132px;
                        height: 30px;
                        line-height: 30px;
                        background: linear-gradient(#fcfcfc, #f5f5f5);
                        cursor: pointer;
                        font-size: 12px;
                        font-weight: 700;
                        margin-top: 15px;
                        text-align: center;
                        color: #5079d9;
                        border: 1px solid #d0d0d0;
                        border-radius: 5px;
                        box-sizing: border-box;
                    }
                }
            }

            .weixin {
                .mask {
                    display: none;
                    position: fixed;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    z-index: 300;
                    background: #000;
                    opacity: .518;
                }

                .qrcode {
                    display: none;
                    width: 333px;
                    height: 469px;
                    margin: -255px 0 0 -187px;
                    padding: 20px;
                    position: fixed;
                    left: 50%;
                    top: 50%;
                    border: 1px solid #e4e4e4;
                    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
                    border-radius: 1px;
                    background-color: #fff;
                    z-index: 1000;
                    text-align: center;

                    .close_btn {
                        width: 36px;
                        height: 36px;
                        background: url(../static/images/close-btn.png) no-repeat;
                        position: absolute;
                        top: -15px;
                        right: -15px;
                        cursor: pointer;
                    }

                    .qrcode_bg {
                        height: 333px;
                        width: 333px;
                        background: url(../static/images/qrcode.jpg) no-repeat;
                        background-size: contain;
                    }

                    h4 {
                        font-size: 23px;
                        line-height: 1em;
                        color: #666;
                        padding: 21px 0 11.3px;
                    }

                    h6 {
                        font-size: 15px;
                        line-height: 1.5em;
                        color: #666;
                        padding: 0 0 16.3px;
                        margin: 0 0 20px;
                        border-bottom: 1px solid #d9d9d9;
                    }
                }
            }
        }

        .copyright {
            color: #434d55;
            font-size: 12px;
            padding: 30px 0 60px;

            h4 {
                float: left;
                height: 15px;
                line-height: 15px;
                color: #bdbdbd;
            }

            .privacy {
                float: left;
                margin: 0 0 0 12px;

                li {
                    float: left;
                    line-height: 12px;
                    padding: 1px 10px 0;
                    border-left: 1px solid #ccc;

                    a {
                        color: #ababab;
                    }
                }
            }

            h6 {
                clear: both;
                padding: 10px 0 0;
                height: 15px;
                font-size: 0;

                a {
                    color: #bdbdbd;
                    font-size: 12px;
                    display: inline-block;
                    height: 12px;
                    line-height: 1;

                    span {
                        margin-right: 20px;
                    }
                }
            }
        }
    }
}


// @import "mixins";

// //定义变量，可以带单位
// $val: 120px;
// $dir: top;

// .box {
//     font-size: $val/2; //变量可以直接进行计算
//     border-#{$dir}: $val; //可以使用 #{变量} 的方式拼接字符串
//     margin-#{$dir}: $val;
// }

// // %表示占位符， center-block不会出现在css文件中
// %center-block {
//     position: absolute;
//     left: 0;
//     right: 0;
//     top: 0;
//     bottom: 0;
//     margin: auto;
// }

// //定义一个多值变量
// $props: 10px 20px 30px;

// .page {
//     width: nth($props, 1); //使用 nth方法取出多值变量的内容
//     height: nth($props, 2);
// }

// /*可以写注释，但是生成CSS的时候，单行注释不会出现*/
// .container {
//     .row {
//         .col {
//             position: relative;

//             .item {
//                 //使用继承语法，将center-block的样式继承过来
//                 @extend %center-block;
//                 height: 200px;
//                 background: salmon;

//                 ul {
//                     //调用混合函数，将代码混合到这个地方
//                     @include opacity(80);

//                     li {
//                         a {
//                             text-decoration: none;
//                             color: black;

//                             // & 表示当前选择器， 这里就是 a 标签
//                             &:hover {
//                                 color: red;
//                             }
//                         }
//                     }
//                 }
//             }
//         }
//     }
// }